<template>
  <div class="setting-wrapper">
    <a-tabs
      tab-position="top"
      default-active-key="field"
      animated
      v-model:activeKey="currentKey"
    >
      <!-- <a-tab-pane key="global" tab="全局">
       <GlobalConfig :globalConfig="globalConfig" />
      </a-tab-pane> -->
      <a-tab-pane key="form" tab="表单">
        <FormConfig :layoutConfig="globalConfig.layoutConfig" />
      </a-tab-pane>
      <a-tab-pane key="field" tab="字段">
        <FieldConfig :record="record" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
// import GlobalConfig from "./GlobalConfig.vue";
import { watch, ref } from "vue";
import FormConfig from "./FormConfig.vue";
import FieldConfig from "./FieldConfig/index.vue";

const props = defineProps({
  globalConfig: {
    type: Object,
    required: true,
  },
  record: {
    type: Object,
    required: true,
  },
});
const currentKey = ref("form");
watch(
  () => props.record.formKey,
  () => {
    currentKey.value = "field";
  }
);
</script>

<style lang="less" scoped>
.setting-wrapper {
  padding: 0 10px;
  overflow-x: hidden;
}
</style>
